<script setup lang="ts">
import { fetchAreaDetailApi } from '@/api/MicroScene/MicroSceneApi';
import LeftPart from '@/views/MicroScene/home/components/LeftPart.vue';
import RightPart from '@/views/MicroScene/home/components/RightPart.vue';
import { useRoute } from 'vue-router';
import { onMounted, ref, watch } from 'vue';
import type { AreaWithTags } from '@/types/micro-scene';

const route = useRoute();
const areaId = ref(route.params.id as string);
const areaDetail = ref<AreaWithTags | null>(null);

// 获取专区详情
const getAreaDetail = async () => {
  try {
    const response = await fetchAreaDetailApi(areaId.value);
    areaDetail.value = response;
  }
  catch (error) {
    console.error('获取专区详情失败:', error);
  }
};

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      areaId.value = newId as string;
      getAreaDetail();
    }
  },
);

onMounted(() => {
  getAreaDetail();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; align-items: center; background: transparent; overflow: auto; height: 100%;">
    <img v-if="areaDetail" :src="areaDetail.coverUrl" :alt="areaDetail.areaName" style="padding: 1rem; width: 100%; max-height: 30rem; border-radius: 1.5rem;">

    <div style="display: flex; flex-direction: row; flex: 1; width: 100%; gap: 1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem;">
      <div style="width: 75%;">
        <LeftPart :area-id="areaId" />
      </div>
      <div style="width: 25%;">
        <RightPart :area-id="areaId" />
      </div>
    </div>
  </a-layout>
</template>

<style lang="scss" scoped>
</style>
